{include file="$header" /}
<div class="mk-index-main">
    <section class="company-synopses-wrap">
        <section class="mk-layout">
            <div class="index-tit-bar">
                <h2 class="title">{:lang('Mini Crawler Cranes')}</h2>
                <p class="desc">{$theme.index_hot_product_desc}</p>
            </div>
            {if (plugin_exist('cms'))}
            <mk-swiper
                class="index-synopses-swiper company-synopses" 
                :pagination="false"
                :navigation="false"
                :list='{:json_encode(get_product_list(["ishot"], 8))}'>
                <template v-slot:item="{ item }">
                    <div class="index-synopsis-item wow fadeInLeft">
                        <div class="item-wrap">
                            <div class="item-img">
                                <a :href="item.url"><img :src="item.cover" :alt="item.title"></a>
                           </div>
                            <div class="item-info">
                                <h3 class="item-title"><a :href="item.url">{{item.title}}</a></h3>
                                <p class="item-desc">{{item.c_title}}</p>
                                <div class="bar-more"><a :href="item.url" class="btn-readmore">{:lang('Read more')}</a></div>
                            </div>
                        </div>
                    </div>
                </template>
            </mk-swiper>
            {else/}
            <el-empty description="未下载cms插件"></el-empty>
            {/if}
        </section>
    </section>
    <section class="main-product-wrap">
        <section class="mk-layout">
            <div class="index-tit-bar">
                <h2 class="title">{:lang('New Arrivals')}</h2>
                <p class="desc">{$theme.index_new_product_desc}</p>
            </div>                     
            <section class="product-wrap">
                {if (plugin_exist('cms'))}
                <mk-swiper 
                    class="index-product-swiper"
                    :pagination="false"
                    :navigation="false"
                    :list='{:json_encode(get_product_list(["isnew"], 8))}'>
                    <template v-slot:item="{ item }">
                        <div class="index-product-item wow fadeInUp">
                            <div class="item-wrap">
                                <div class="pd-img"><a :href="item.url"><img :src="item.cover" :alt="item.title"></a></div>
                                <div class="pd-info">
                                    <h3 class="pd-name"><a :href="item.url">{{item.title}}</a></h3>
                                </div>
                            </div>
                        </div>
                    </template>
                </mk-swiper>
                {else/}
                <el-empty description="未下载cms插件"></el-empty>
                {/if}
            </section>
            <div class="bar-more"><a href="{$theme.index_product_url}" class="btn-readmore">{:lang('Read more')}</a></div>
        </section>
    </section>
    <section class="about-us-wrap">
        <section class="mk-layout">
            <div class="about-tit-bar">
               <h2 class="about-tit wow fadeInUp"><strong>{$theme.index_about_title}</strong></h2>
            </div>
            <div class="about-us">
                <div class="about-banner">
                    <mk-swiper class="index-about-swiper" :list='{:json_encode($theme.index_about_banner)}' :navigation="false">
                        <template v-slot:item="{ item }">
                            <img :src="item.cover"/>
                        </template>
                    </mk-swiper>
                </div>
                <div class="about-detail">
                    <div class="text wow fadeInUp" data-wow-delay=".1s">
                        {$theme.index_about_content|raw}
                    </div>
                    <div class="bar-more wow fadeIn" data-wow-delay=".2s">
                        <a href="{$theme.index_about_url}" class="btn-readmore">{:lang('Read more')}</a>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <section class="promote-banner">
        <p>{$theme.index_about_desc}</p>
    </section>
    <section class="main-product-wrap">
        <section class="mk-layout">
            <div class="index-tit-bar">
                <h2 class="title">{:lang('Featured Products')}</h2>
                <p class="desc">{$theme.index_recommend_product_desc}</p>
            </div>                     
            <section class="product-wrap">
                {if (plugin_exist('cms'))}
                <mk-swiper 
                    class="index-product-swiper"
                    :pagination="false"
                    :navigation="false"
                    :list='{:json_encode(get_product_list(["isrecommend"], 8))}'>
                    <template v-slot:item="{ item }">
                        <div class="index-product-item wow fadeInUp">
                            <div class="item-wrap">
                                <div class="pd-img"><a :href="item.url"><img :src="item.cover" :alt="item.title"></a></div>
                                <div class="pd-info">
                                    <h3 class="pd-name"><a :href="item.url">{{item.title}}</a></h3>
                                </div>
                            </div>
                        </div>
                    </template>
                </mk-swiper>
                {else/}
                <el-empty description="未下载cms插件"></el-empty>
                {/if}
            </section>
            <div class="bar-more"><a href="{$theme.index_product_url}" class="btn-readmore">{:lang('Read more')}</a></div>
        </section>
    </section>
</div>
{include file="$component" /}
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        mounted() {
            this.$nextTick(function () {
                new WOW().init()
            })
        },
    });
</script>
{include file="$footer" /}